<template>
  <div class="positionInfo">
    <!-- 位置信息 -->
    <div class="info">
      <div class="nameList">
        <div class="name">位置信息</div>
        <div class="list" v-if="!disabledType">
          <el-button type="primary" size="mini" round @click="submit">保存</el-button>
        </div>
      </div>
      <div class="item1">
        <div class="label"><span class="mark">*</span>位置名称：</div>
        <div class="item">
          <el-input v-model="positionInfo.name" maxlength="32" placeholder="请输入位置名称" clearable :disabled="disabledType">
          </el-input>
        </div>
      </div>
      <div class="item1">
        <div class="label">位置编码：</div>
        <div class="item">
          <div>{{ positionInfo.siteCode }}</div>
        </div>
      </div>
      <div class="item1" style="border:none;">
        <div class="label"><span class="mark">*</span>配置厂商：</div>
        <div class="item">
          <el-checkbox class="checked" v-model="checked" @change='onChange' :disabled="disabledType">独占模式</el-checkbox>
        </div>
      </div>
      <div class="item3">
        <!-- 按钮列表 -->
        <div class="btnList" v-if="!disabledType">
          <el-button type="primary" size="mini" round @click="addFirm" :disabled="isDisabled">添加</el-button>
          <div>
            <el-button type="text" @click="updatePosition('top')" :disabled="disabled">置顶</el-button>
            <el-button type="text" @click="updatePosition('moveUp')" :disabled="disabled">上移</el-button>
            <el-button type="text" @click="updatePosition('moveDown')" :disabled="disabled">下移</el-button>
            <el-button type="text" @click="updatePosition('bottom')" :disabled="disabled">置底</el-button>
            <el-button type="text" style="color:red;"
              :disabled="JSON.stringify(this.selectRecom) == '{}' ? true : false" @click="deleteData">删除</el-button>
          </div>
        </div>
        <TableList :tableData="tableData" :tableConfig="tableConfig" @handleRowSelect="selectData">
        </TableList>
      </div>
    </div>

    <!-- 新增厂商弹窗 -->
    <el-dialog :visible.sync="editModal.show" :title="editModal.title" width="600" :close-on-click-modal="false">
      <!-- 查询 -->
      <SearchForm :queryData="queryData" :queryItem="queryItem" :queryHandle="queryHandle"></SearchForm>
      <!-- 表格 -->
      <TableList :tableData="modalTable" :tableConfig="tableConfig" @handleRowSelect="handleRowSelect">
      </TableList>
      <!-- 分页 -->
      <div class="page">
        <el-pagination :total="modalTable.total" :page-sizes="[5, 10, 15, 20]" :page-size="modalTable.pageSize"
          layout="total, sizes, prev, pager, next, jumper" @size-change="changePageSize" @current-change="changePage"
          :current-page="modalTable.current">
        </el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button round @click="handleCancle">取 消</el-button>
        <el-button round type="primary" @click="handleOk">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import SearchForm from '@/commont/plugins/searchForm.vue'
import TableList from '@/commont/plugins/customTable.vue'
export default {
  name: "positionInfo",
  components: { SearchForm, TableList },
  props: {
    siteId: {
      tyep: String,
      required: true,
    },
    positionInfo: {
      tyep: Object,
      required: true,
    },
    disabledType: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      checked: true,// 0：共享  1：独占
      disabled: false,
      isDisabled: false,
      tableData: {
        columns: [
          { title: '排序', prop: 'sequence', width: '50', align: 'center' },
          { title: '厂商ID', prop: 'providerId', width: '110', align: 'center' },
          { title: '厂商名称', prop: 'providerName', align: 'center' },
        ],
        data: [],
      },
      tableConfig: {
        typeName: 'single', //多选:multiple  单选:single  展开行:expand
      },
      selectRecom: {},

      // 新增弹窗
      editModal: {
        show: false,
        title: '',
      },
      modalTable: {
        columns: [
          { title: '序号', type: 'index', width: '65', align: 'center' },
          { title: '厂商ID', prop: 'providerId', align: 'center' },
          { title: '厂商名称', prop: 'providerName', align: 'center' },
          { title: '创建时间', prop: 'createTime', align: 'center' },
        ],
        data: [],
        total: 0,
        current: 1,
        pageSize: 10,
      },

      rexommendObj: {},
      queryData: {//筛选条件
        providerId: '',
        providerName: '',
        currentPage: 1,
        pageSize: 10
      },
      queryItem: [//筛选数据
        { type: 'Input', label: '厂商ID', prop: 'providerId', },
        { type: 'Input', label: '厂商名称', prop: 'providerName' },
      ],
      queryHandle: [//筛选按钮
        { label: '查询', type: 'primary', handle: this.queryFirmData },
      ],

    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() {
    this.initQuery();
  },
  updated() { },
  methods: {
    // 保存
    submit() { },
    // 初始化获取厂商数据
    initQuery() {
      this.tableData.data = [
        { sequence: 1, isChecked: false, providerId: '324234324', providerName: '测试发士大夫士大夫发生发测试' }
      ]
    },
    // 是否独占
    onChange(data) {
      // if(this.hasBtn('add_site_provide')==false){
      //   this.$message({message:'您没有设置厂商独占的权限，若要设置请联系管理员！',type:'error'});
      // } else {
      //   if(this.tableData.data.length > 1){
      //     this.checked = false;
      //     this.$message({message:'独占设置失败，请删除多余配置',type:'warning'});
      //   } else {
      //     data = data==false?0:1;
      //     this.isDisabled = false;
      //     if(this.tableData.data.length<=0){
      //       this.isDisabled = false;
      //     } else if(data == 1 && this.tableData.data.length>=1){
      //       this.isDisabled = true;
      //     }
      //     let params ={ floorPageId: this.positionInfo.floorId, sitePageId:this.positionInfo.siteId, monopolyFlag:data };
      //     requestInfoConfig(params,'onlyType').then(res =>{
      //       let {result_code, result_msg} = res;
      //       if(result_code == 0){
      //         this.$message({message:'保设置成功',type:'success'});
      //       } else {
      //         this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
      //       }
      //     })
      //   }
      // }
    },
    // 置顶:top,置底:bottom,上移:moveUp,下移:moveDown
    updatePosition() { },
    // 选中已配置数据
    selectData(data) {
      if (this.disabledType == true) return;
      this.selectRecom = data;
      this.tableData.data.forEach(item => {
        if (data.providerId == item.providerId) {
          item.isChecked = true;
        } else {
          item.isChecked = false;
        }
      });
    },
    // 删除已配置数据
    deleteData() { },

    /************************** 新增 ***************************/
    getHeaderStyle({ row, column, rowIndex, columnIndex }) {
      return 'tableHeaderStyle'
    },
    // 新增厂商
    addFirm() {
      this.editModal.show = true;
      this.editModal.title = '选择厂商';
      this.queryFirmData();
    },
    // 查询厂商库
    queryFirmData() {
      this.modalTable.data = [
        { providerId: '1211', isChecked: false, providerName: '运营编排', createTime: '2022-12-16 12:23:29' },
        { providerId: '1212', isChecked: false, providerName: '广告', createTime: '2022-12-16 12:23:29' },
        { providerId: '1213', isChecked: false, providerName: '数据运营（思腾）', createTime: '2022-12-16 12:23:29' },
        { providerId: '1215', isChecked: false, providerName: '辨识运营', createTime: '2022-12-16 12:23:29' },
      ];
      this.modalTable.total = this.modalTable.data.length;
    },
    // 选中厂商(单选)
    handleRowSelect(currentRow) {
      console.log('当前数据', currentRow);
      this.rexommendObj = currentRow;
      this.modalTable.data.forEach(item => {
        if (currentRow.providerId == item.providerId) {
          item.isChecked = true;
        } else {
          item.isChecked = false;
        }
      })
    },
    selectFirm() { },
    // 分页
    changePageSize(value) {
      // console.log("changePageSize",value);
      this.queryFirmData({
        pageSize: value,
        current: 1
      })
    },
    changePage(value) {
      // console.log("changePage",value);
      this.queryFirmData({
        current: value
      })
    },
    // 保存新增
    handleOk() { },
    // 关闭弹窗
    handleCancle() {
      this.editModal.show = false;
    },

  },
  filters: {},
}
</script>

<style lang="scss" scoped>
.positionInfo {
  margin: 15px 20px;

  .nameList {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 15px 0px;

    .name {
      font-weight: bold;
    }
  }

  .info {
    .item1 {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      border-bottom: 1px dashed #dbdbdb;
    }

    .item2 {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      padding: 10px;
      border-bottom: 1px dashed #dbdbdb;
    }

    .item3 {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding: 10px;
      border-bottom: 1px dashed #dbdbdb;
    }

    .label {
      width: 100px;
      position: relative;

      .mark {
        font-family: SimSun;
        font-size: 14px;
        color: #ed4014;
        position: absolute;
        top: 3px;
        left: -10px;
      }
    }

    .item {
      width: calc(100% - 100px);

      .infoCon {
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: flex-start;

        .con {
          display: flex;
          align-items: center;

          span {
            width: 25px;
          }
        }
      }
    }

    .addBtn {
      width: 60px;
      margin-left: 10px;
    }

    .infoItem {
      display: flex;
      flex-direction: column;
      margin-left: 10px;
      margin-top: 15px;

      .items {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin: 10px;
        padding-bottom: 5px;
        border-bottom: 1px dashed #dbdbdb;

        .name {
          width: 70px;
        }

        .con {
          width: calc(100% - 70px);
          display: flex;
          flex-direction: row;
          align-items: center;

          & div:nth-child(1) {
            margin-right: 30px;
          }
        }
      }
    }

    .btnList {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
    }

    .table1 {
      margin-top: 10px;

      .colums,
      .dataBox {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        border: 1px solid #e8eaec;
        border-bottom: none;
      }

      .colums {
        background-color: #F0F2F5;

        .colItem {
          width: 125px;
          padding: 8px 10px;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          border-left: 1px dashed #dcdfe6;

          &:nth-child(1) {
            width: 15px;
            height: 15px;
            margin: 11px;
            padding: 0;
            border-left: none;
          }

          &:nth-child(2) {
            width: 55px;
            border-left: none;
          }
        }
      }

      .dataBox {
        &:nth-last-child(1) {
          border: 1px solid #e8eaec;
        }

        .selcet {
          width: 15px;
          height: 15px;
          margin: 11px;
          background-color: #fff;
          border: 1px solid #dcdfe6;
          border-radius: 2px;
          box-sizing: border-box;
          z-index: 1;
          transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46);
          position: relative;

          &::after {
            box-sizing: content-box;
            content: "";
            border: 1px solid #fff;
            border-left: 0;
            border-top: 0;
            height: 7px;
            left: 4px;
            position: absolute;
            top: 1px;
            transform: rotate(45deg) scaleY(0);
            width: 3px;
            transition: transform .15s ease-in .05s;
            transform-origin: center;
          }
        }

        .itemTab {
          width: 125px;
          padding: 15px 10px;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          &:nth-child(2) {
            width: 55px;
          }
        }

        .isChecked {
          background-color: #409eff;
          border-color: #409eff;

          &::after {
            transform: rotate(45deg) scaleY(1);
          }
        }
      }

      .color {
        color: #409eff;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
::v-deep .el-checkbox {
  display: flex;
  align-items: center;
}
</style>